<template>
  <div class="main" id="main" :style="{ height: `${mainHeight}px` }">
    <view class="totalNum flex justifyCenter">
      <view class="dot"></view>
      当前{{userNum}}人在线
    </view>

    <view class="danmaku" id="danmaku" v-if="danmakuData.length && danmakuHeight" :style="{ height: `${danmakuHeight}px` }">
      <!-- 弹幕 -->
      <sv-danmaku ref="danmakuRef" :list="danmakuData" :showSend="false" :loop="true"></sv-danmaku>
    </view>

    <view class="send" id="send">
      <view class="tips textCenter fz12" v-if="bulletNum">今日还可发送{{bulletNum}}条弹幕</view>
      <view class="tips textCenter fz12" v-else>今日弹幕发送已上限，明天再来吧～</view>
      <uv-input v-model="sendParams.textContent" border="none" shape="circle" placeholder="多发弹幕更容易被异性关注哦!" :customStyle="sendStyle">
        <!-- vue3模式下必须使用v-slot:suffix -->
        <template v-slot:suffix>
          <uv-button :disabled="!sendParams.textContent.length" text="发送" :loading="loading" @click="send" shape="circle" :customStyle="btnStyle" color="linear-gradient(to right, #D3A7F9, #B2A1FF)"></uv-button>
        </template>
      </uv-input>
    </view>

    <!-- 点击弹幕 -->
    <uv-popup ref="popup" mode="bottom" round="20" :safeAreaInsetBottom="false" zIndex="2" @change="change">
      <view class="popupContent">
        <view class="avatar flex justifyCenter" @click="proxy.$utils.toLink(`/packagePages/user/details?id=${counter.bulletChat.userId}`)">
          <uv-avatar :src="counter.bulletChat.logo" size="80"></uv-avatar>
        </view>
        <baseInfo :userId="counter.bulletChat.userId"></baseInfo>
      </view>
    </uv-popup>
  </div>
</template>

<script setup lang="ts">
// 用户信息
import baseInfo from "@/pages/tabbar/tabbar-5/components/baseInfo.vue";
import svDanmaku from "@/uni_modules/sv-danmaku/components/sv-danmaku/sv-danmaku.vue";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let mainHeight = ref(0);
let danmakuHeight = ref(0);
let danmakuData = ref([]); //弹幕数据
let sendParams = ref({
  //发送弹幕参数
  textContent: "",
});
let loading = ref(false);
let bulletNum = ref(0); //弹幕数量
let userNum = ref(0); //在线用户数量
let nowSendArr = ref([]); //当前发送弹幕数组

onMounted(async () => {
  await setCss();
  getBarrage(); //获取弹幕
  getInfo();
});

let btnStyle = computed(() => {
  return {
    fontSize: "14px",
    boxShadow: "0 2px 8px 2px rgba(225, 225, 225, 0.53)",
    width: "76px",
    height: "30px",
    padding: "6px 0",
  };
});
let sendStyle = computed(() => {
  return {
    border: "1px solid #DADADA",
    padding: "5px 14px",
  };
});

let setCss = () => {
  //缓存弹幕高度
  if (counter.slParams.danmakuHeight)
    danmakuHeight.value = counter.slParams.danmakuHeight;

  //缓存弹幕
  if (counter.slParams.danmakuData && counter.slParams.danmakuData.length)
    danmakuData.value = counter.slParams.danmakuData;

  nextTick(async () => {
    const systemInfo = uni.getSystemInfoSync();
    let windowHeight = systemInfo.windowHeight;
    let top = await viewInfo("#danmaku", "top");

    let mainTop = await viewInfo("#main", "top");
    let sendHeight = await viewInfo("#send", "height");
    mainHeight.value =
      windowHeight - Number(mainTop) - counter.slParams.tabbarHeight;

    danmakuHeight.value = windowHeight - Number(top) - Number(sendHeight);
    counter.setRelease("danmakuHeight", danmakuHeight.value);
  });
};

let getInfo = async () => {
  await counter.updateUserToken(1);

  //获取在线用户数量
  userNum.value = await proxy.$apis.queryUserOnline();

  //获取弹幕数量
  bulletNum.value = await proxy.$apis.getSendBarrageCount();
};

let getBarrage = async () => {
  //获取弹幕数据
  let data = await counter.getBarrage("");
  counter.setRelease("danmakuData", data);
  danmakuData.value = proxy.$utils.shuffle(data);

  //注册弹幕点击事件
  setTimeout(() => {
    instance.refs.danmakuRef.createTimer();
    uni.$on("e-danmaku-click", (e) => {
      if (e.id) {
        counter.bulletChat = e;
        instance.refs.popup.open();
      }
    });
  }, 300);
};

let change = (e) => {
  if (!e.show) {
    counter.bulletChat = {};
  }
};

let send = async () => {
  try {
    loading.value = true;
    await proxy.$apis.sendBarrage(sendParams.value);
    getBarrage();
    //nowSend();
    sendParams.value.textContent = "";
    proxy.$utils.showToast("发送成功");
    if (instance.refs.danmakuRef) {
    }
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

let nowSend = () => {
  //如果用户刚刚发了一条弹幕
  if (sendParams.value.textContent) {
    let query = {};
    danmakuData.value.forEach((element) => {
      if (
        element.userId == counter.slParams.userInfo.userId &&
        element.text == sendParams.value.textContent
      ) {
        query = proxy.$utils.deepcopy(element);
      }
    });
    nowSendArr.value = [query];
    nextTick(() => {
      instance.refs.nowSendArrRef && instance.refs.nowSendArrRef.createTimer();
      // uni.$on("e-danmaku-click", (e) => {
      //   if (e.id) counter.bulletChat = e;
      // });

      setTimeout(() => {
        instance.refs.nowSendArrRef && instance.refs.nowSendArrRef.clearTimer();
        nowSendArr.value = [];
      }, 15000);
    });
  }
};

//获取页面元素信息
function viewInfo(id, type) {
  return new Promise((resolve, reject) => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select(id)
      .boundingClientRect((data) => {
        if (data) {
          resolve(data[type]);
        } else {
          resolve(0);
        }
      })
      .exec();
  });
}
</script>



<style lang="scss" scoped>
.main {
  position: relative;
}
.totalNum {
  color: #333333;
  font-size: 8px;
  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #00ff03;
    margin-right: 6px;
  }
}
.send {
  padding: 0 16px 25px;
  background-color: white;
  .tips {
    margin-bottom: 9px;
    color: #999999;
  }
}
.danmaku {
  position: relative;
  .danmakuAbo {
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    bottom: 0;
  }
}

.popupContent {
  background: transparent;
  position: relative;
  padding: 15px 15px 25px 15px;
  max-height: 80vw;
  overflow-y: auto;
  .avatar {
    border: 2px solid #fff;
    border-radius: 50%;
    width: 80px;
    margin: auto;
    z-index: 1;
  }
}
</style>
